<script setup lang="ts">
import { onMounted, ref, useAttrs } from 'vue';
import interact from 'interactjs'
import { showConfirmDialog, showFailToast, showSuccessToast } from 'vant';
import 'vant/es/dialog/style';
import { iconMap } from '@/components/icons/iconmap';
import { getStorageItem, setStorageItem } from '@/utils/lf';
import { PASSWORD_ENUM } from '@/utils/constant';
import type { Password } from '../PassboxView.vue';
import CreateAndEditPassword from './CreateAndEditPassword.vue';
import ConfirmUser from '@/components/ConfirmUser.vue';
import { decryptPassword } from '@/utils/crypto';
import copy from 'copy-to-clipboard';

const cardProps = defineProps<{
  cardInfo: {
    id: string;
    title: string;
    password: string;
    account: string;
    logo: string;
  }
}>()

const emit = defineEmits<{
  (e: 'update:passwordList'): void
}>()

const card = ref(null);
const showCard = ref(true);
const confirmUser = ref<InstanceType<typeof ConfirmUser>>();
const editAccountRef = ref<InstanceType<typeof CreateAndEditPassword>>();
const copyType = ref<'account' | 'password'>('account');
const attrs = useAttrs();
const title = ref('');

onMounted(() => {
  interact(card.value!)
    .on('hold', function () {
      showConfirmDialog({
        title: '警告',
        message:
          '删除此密码?'
      })
        .then(async () => {
          showSuccessToast('删除成功')
          const passwords = await getStorageItem(PASSWORD_ENUM.LIST_KEY) as Password[];
          const newPasswords = passwords.filter(item => item.id !== cardProps.cardInfo.id);
          setStorageItem(PASSWORD_ENUM.LIST_KEY, newPasswords);
          showCard.value = false;
        })
        .catch(() => {
          showFailToast('取消操作')
        });
    })
});

const updatePassword = async () => {
  emit('update:passwordList');
};

const showCopyValidator = (type) => {
  if (type === 'account') {
    title.value = `复制 < ${cardProps.cardInfo.title} > 账号`;
  } else {
    title.value = `复制 < ${cardProps.cardInfo.title} > 密码`;
  }
  copyType.value = type;
  confirmUser.value?.showConfirmUserPopup();
}

const editAccount = () => {
  editAccountRef.value?.showEditPopup();
}

const copyAccount = (result: boolean) => {
  if (result) {
    const decryptedPassword = decryptPassword(cardProps.cardInfo.password, import.meta.env.VITE_ENCRYPT_KEY);
    if (copyType.value === 'account') {
      copy(cardProps.cardInfo.account);
      showSuccessToast('账号复制成功')
    } else {
      copy(decryptedPassword)
      showSuccessToast('密码复制成功')
    }
  }
}

</script>

<template>
  <div v-if="showCard" ref="card" class="van-hairline--surround pass-card p-2 mx-2 dark:bg-neutral-800 rounded-md"
    :class="attrs.class">
    <div class="info flex gap-4">
      <h3 class="flex items-center font-bold">
        <component class="w-18 h-18" :is="iconMap[cardProps.cardInfo.logo]"></component>
      </h3>
      <div class="flex-1">
        <h3 class="font-bold">名称: {{ cardProps.cardInfo.title }}</h3>
        <van-button type="primary" @click="showCopyValidator('account')" size="mini">
          {{ cardProps.cardInfo.account }}</van-button>
        <h3 class="font-bold">密码</h3>
        <van-button type="primary" @click="showCopyValidator('password')" size="mini">复制密码</van-button>
        <van-button icon="edit" type="success" size="mini" @click="editAccount" />
      </div>

    </div>
  </div>
  <!-- note: 弹窗如果放到上面的div里面会出现长按弹窗空白处也会显示是否删除密码弹窗 -->
  <CreateAndEditPassword ref="editAccountRef" mode="edit" :id="cardInfo.id" @update:passwordList="updatePassword" />
  <ConfirmUser ref="confirmUser" @result="copyAccount" :title="title" tip="请注意保护您的个人隐私" />
</template>

<style lang="scss" scoped>
.van-hairline--surround::after {
  border-radius: 6px;
}
</style>